<template>
  <div>
    <ul>
      <li v-for="m in messages"
          :key="m.id">
        <!--
            传递params参数
            1. 字符串拼接：
            2. 对象
        -->
        <!-- 
            字符串写法
            <router-link :to="'/home/message/detail/'+ m.id + '/' + m.title">{{m.title}}</router-link>
            <router-link :to="`/home/message/detail/${m.id}/${m.title}`">{{m.title}}</router-link>
        -->
        <!--
            对象写法:
            注意：对象写法，携带parmas参数，需要用name跳转，不能使用path
        -->
        <!-- 
            错误的path 跳转
            <router-link :to="{path:'/home/message/detial/:id/:title', params:{id:m.id, title:m.title}}">{{m.title}}</router-link> 
        -->
        <!--
            params参数个数问题：
            1. 对象写法：
                1-1. 参数多了，正常显示没有报错
                1-2. 参数少了：参数少了，控制台有警告，页面不跳转===> 有问题不正常
                
            2. 字符串写法： 
                2-1. 参数多了：页面找不到
                2-2. 参数少了：页面找不到

        -->
        <!-- <router-link :to="{name:'xiangqing', params:{id:m.id}}">{{m.title}}</router-link>  -->

        <!-- <router-link :to="`/home/message/detail/${m.id}/${m.title}/yyy`">{{m.title}}</router-link> -->
        <!-- <router-link :to="`/home/message/detail/${m.id}/'123'`">{{m.title}}</router-link> -->

        <!-- 可选参数，如果传了 空字符串或空数组，显示不正常
            可选参数，要么不传，要么传正常的值，要么传undefined
        <router-link :to="{name:'xiangqing', params:{id:m.id,title:[]}}">{{m.title}}</router-link>
        <router-link :to="{name:'xiangqing', params:{id:m.id,title:''}}">{{m.title}}</router-link>
        
        -->
        <router-link :to="{name:'xiangqing', params:{id:m.id,title:m.title}}">{{m.title}}</router-link>


            <!--
                2. 携带 query参数
                    1. to属性是字符串
                    2. to属性是对象， 通过 query属性进行传递
             -->
            <!-- <router-link :to="`/home/message/detail?id=${m.id}&title=${m.title}`">{{m.title}}</router-link> -->
            <!-- <router-link :to="{name:'xiangqing', query:{id:m.id, title:m.title}}">{{m.title}}</router-link> -->
      </li>
    </ul>
    <div>
      <router-view />  
    </div>
  </div>
</template>

<script>
export default {
  name: 'Message',
  data() {
    return {
      messages: [
        {
          id: 1,
          title: '震惊：宏福苑惊现甲流交流群',
        },
        {
          id: 2,
          title: '震惊：人类记忆又有新发现，比鱼强不了多少',
        },
        {
          id: 3,
          title: '是中国人，赶紧转，5分钟后就被封了',
        },
      ],
    }
  },
}
</script>

<style>
</style>